<template>
  <div>
    <h3>参考博客：https://www.jianshu.com/p/fd399ad4b7d8</h3>
    <div id="map" ref="rootmap">

    </div>
  </div>

</template>

<script>
import "ol/ol.css";
import { Map } from "ol";
import mapconfig from './Demo1.js'

export default {
  data () {
    return {
      map: null
    };
  },
  mounted () {
    this.map = new Map({
      target: "map",
      layers: mapconfig.mapLayerArr(), // 图层
      view: mapconfig.view()
    });
  }
};
</script>

<style>
#map {
  height: 600px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
</style>